<script setup lang="ts">
import { seoConfig } from '~/config/seo'

useSeoMeta({
  title: seoConfig.about.title,
  description: seoConfig.about.description,
  keywords: seoConfig.about.keywords
})

// 数据统计
const statistics = [
  { value: '1W+', label: '用户数量' },
  { value: '1200条/秒', label: '通道流速' },
  { value: '50+', label: '直连网关通道' },
  { value: '<5s', label: '响应时长' }
]

// 产品分类
const productCategories = [
  {
    name: '云通讯产品',
    products: ['通知短信', '验证码短信', '会员营销短信', '图片/视频短信', '5G短信', '语音短信', '国际短信']
  },
  {
    name: '物联网',
    products: ['物联网卡']
  },
  {
    name: '号码检测',
    products: ['空号检测', '防骚扰黑名单']
  },
  {
    name: '实名认证',
    products: ['身份证实名认证', '人脸对比', '运营商三要素', '银行卡四要素', '一键登录SDK', '行为验证码']
  },
  {
    name: '业务风控',
    products: ['活体检测API', 'OCR文字识别']
  },
  {
    name: 'IDC',
    products: ['IDC服务', 'DCI服务']
  }
]

// 服务承诺
const services = [
  {
    icon: 'lucide:zap',
    title: '准时到达',
    features: [
      '安全的三网合一通道，可覆盖移动、电信、联通',
      '106全号段',
      '多条备用通道支持'
    ],
    color: 'from-blue-500 to-cyan-500'
  },
  {
    icon: 'lucide:users',
    title: '专业团队',
    features: [
      '完善的客户服务体系及运维系统',
      '专职技术及销后服务人员全程跟踪',
      '平台数据可视化展示即时反馈'
    ],
    color: 'from-purple-500 to-pink-500'
  },
  {
    icon: 'lucide:dollar-sign',
    title: '价格透明',
    features: [
      '平台标准定价，严禁恶意扣费',
      '成功计费模式',
      '多种套餐灵活选择'
    ],
    color: 'from-green-500 to-emerald-500'
  },
  {
    icon: 'lucide:headphones',
    title: '1V1客服',
    features: [
      '专业客服团队全程对接，有效沟通',
      '7×24H "顾问式服务"',
      '快速响应，及时解决问题'
    ],
    color: 'from-orange-500 to-red-500'
  }
]

// 资质证书
const certificates = [
  { name: '隐私信息管理体系认证证书', image: '/certificates/cert1.jpg' },
  { name: '质量管理体系认证证书', image: '/certificates/cert2.jpg' },
  { name: '中华人民共和国电信网码号资源使用证书', image: '/certificates/cert3.jpg' },
  { name: '中华人民共和国增值电信业务经营许可证', image: '/certificates/cert4.jpg' }
]

// 联系方式
const contactInfo = [
  // { icon: 'lucide:globe', label: '公司官网', value: '' },
  { icon: 'lucide:mail', label: '公司邮箱', value: '476299630@qq.com ' },
  { icon: 'lucide:phone', label: '联系热线', value: '15860740037' },
  // { icon: 'lucide:map-pin', label: '公司地址', value: '' }
]
</script>

<template>
  <div class="min-h-screen">
    <!-- 顶部横幅 -->
    <section class="relative bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 py-20 md:py-28" style="background-image: url('/bg_about.png'); background-size: cover; background-position: center;">
      <div class="relative mx-auto px-4 max-w-6xl">
        <div class="text-center max-w-3xl mx-auto">
          <h1 class="text-4xl md:text-5xl lg:text-5xl mb-4 text-gray-900" style="font-weight: 900;">
            关于我们
          </h1>
          <p class="text-ls md:text-lg text-gray-700 leading-relaxed">
            迅达智讯是基于中国三大运营商直接提供的短信端口与互联网连接实现与客户指定号码进行短信批量发送和自定义发送的平台。致力于短信应用技术的开发产品销售和系统集成，为广大客户提供全方位的短信应用和解决方案。
          </p>
        </div>
      </div>
    </section>

    <!-- 数据统计 -->
    <section class="py-16 bg-white">
      <div class="mx-auto px-4 max-w-6xl">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
          <div
            v-for="(stat, index) in statistics"
            :key="index"
            class="text-center"
          >
            <div class="text-4xl md:text-5xl font-bold text-[#315EFB] mb-2">
              {{ stat.value }}
            </div>
            <div class="text-gray-600">{{ stat.label }}</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 关于我们 -->
    <section class="py-16 md:py-24 bg-gray-50">
      <div class="mx-auto px-4 max-w-6xl">
        <div class="text-center mb-12">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            我们的愿景
          </h2>
          <p class="text-lg text-gray-600 max-w-3xl mx-auto">
            向客户提供业界领先的网络电信增值业务经营服务，目前用户数量已突破1W+，合作伙伴100+，如今已建立起良好的口碑
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div
            v-for="(category, index) in productCategories"
            :key="index"
            class="bg-white rounded-2xl p-6 shadow-sm hover:shadow-lg transition-all"
          >
            <h3 class="text-xl font-bold text-gray-900 mb-4 pb-3 border-b-2 border-[#315EFB]">
              {{ category.name }}
            </h3>
            <div class="space-y-2">
              <div
                v-for="(product, pIndex) in category.products"
                :key="pIndex"
                class="flex items-center gap-2 text-gray-700"
              >
                <Icon name="lucide:check" class="w-4 h-4 text-[#315EFB] flex-shrink-0" />
                <span>{{ product }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 服务承诺 -->
    <section class="py-16 md:py-24 bg-white">
      <div class="mx-auto px-4 max-w-6xl">
        <div class="text-center mb-16">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            服务承诺
          </h2>
          <p class="text-lg text-gray-600">
            好的售后服务也是客户信赖的原因
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div
            v-for="(service, index) in services"
            :key="index"
            class="group relative bg-gray-50 rounded-2xl p-8 hover:shadow-xl transition-all"
          >
            <div class="flex items-start gap-4">
              <!-- <div :class="['w-14 h-14 rounded-xl flex items-center justify-center flex-shrink-0 bg-gradient-to-br', service.color]">
                <Icon :name="service.icon" class="w-7 h-7 text-white" />
              </div> -->
              <div class="flex-1">
                <h3 class="text-xl font-bold text-gray-900 mb-4">
                  {{ service.title }}
                </h3>
                <ul class="space-y-2">
                  <li
                    v-for="(feature, fIndex) in service.features"
                    :key="fIndex"
                    class="flex items-start gap-2 text-gray-700"
                  >
                    <span class="text-[#315EFB] mt-1">—</span>
                    <span>{{ feature }}</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 资质和证书 -->
    <section class="py-16 md:py-24 bg-gray-50">
      <div class="mx-auto px-4 max-w-6xl">
        <div class="text-center mb-16">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            资质和证书
          </h2>
          <p class="text-lg text-gray-600">
            权威认证，值得信赖
          </p>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8">
          <div
            v-for="(cert, index) in certificates"
            :key="index"
            class="bg-white rounded-2xl p-6 shadow-sm hover:shadow-lg transition-all group"
          >
            <div class="aspect-[3/4] bg-gray-100 rounded-lg mb-4 flex items-center justify-center overflow-hidden">
              <!-- <Icon name="lucide:award" class="w-16 h-16 text-gray-300 group-hover:text-blue-500 transition-colors" /> -->
              <img :src="cert.image" class="w-full h-full object-contain" alt="">
            </div>
            <p class="text-sm text-gray-700 text-center leading-relaxed">
              {{ cert.name }}
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我们 -->

    <!-- CTA 部分 -->
    <CallToAction />
  </div>
</template>
